<template>
  <div class="parent d-flex">
    <div class="left mr-15">
      <div class="header d-flex jc-between">
        <div class="title d-flex ai-center jc-center">
          <div class="divider"></div>
          {{ $t("msrjl.moshengrenjulei") }}
          <el-tooltip class="item ml-10" effect="light" placement="top-start">
            <div slot="content">
              {{ $t("grey_tips1") }}
              <br />
              {{ $t("grey_tips2") }}
              <br />
              {{ $t("grey_tips3") }}
            </div>
            <el-icon class="el-icon-question mr-10" />
          </el-tooltip>
        </div>
        <div class="switch-box d-flex ai-center jc-center">
          <div class="switch-box-title mr-10">
            {{ $t("msrjl.moshengrenjulei") }}
          </div>
          <el-switch
            v-model="formData.enable"
            :active-value="1"
            :inactive-value="0"
            @change="handleChangeMoshengrenSwitch"
          />
        </div>
      </div>
      <div class="content">
        <el-form :model="formData" class="form">
          <el-form-item
            class="slider-wrapper"
            :label="`${$t('msrjl.quchongjiange')}` + ':'"
          >
            <el-slider
              v-model="formData.interval"
              show-stops
              :marks="marks"
              :max="6"
              :format-tooltip="formatSlider"
            ></el-slider>
            {{ $t("msrjl.minute") }}
          </el-form-item>
          <el-form-item
            :label="`${$t('msrjl.shibieyuzhi')}` + ':'"
            prop="threshold"
          >
            <el-input-number
              class="my-input-number"
              v-model="formData.threshold"
              :min="65"
              :max="100"
              label="%"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <MyButton @click="handleMoshengrenSubmit" class="confirm">{{
              $t("common.confirm")
            }}</MyButton>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="right">
      <div v-show="formData.enable === 1" class="header d-flex jc-between">
        <div class="title d-flex ai-center jc-center">
          <div class="divider"></div>
          {{ $t("msrjl.paihuaigaojing") }}
             <el-tooltip class="item ml-10" effect="light" placement="top-start">
            <div slot="content">
              {{ $t("wander_tips1") }}
              <br />
              {{ $t("wander_tips2") }}
              <br />
              {{ $t("wander_tips3") }}
              <br />
              {{ $t("wander_tips4") }}
            </div>
            <el-icon class="el-icon-question mr-10" />
          </el-tooltip>
        </div>
        <div class="switch-box d-flex ai-center jc-center">
          <div class="switch-box-title mr-10">
            {{ $t("msrjl.paihuaigaojing") }}
          </div>
          <el-switch
            v-model="formData2.enable"
            :active-value="1"
            :inactive-value="0"
            @change="handlePaihuaiSubmit"
          />
        </div>
      </div>
      <div v-show="formData.enable === 1" class="content">
        <el-form :model="formData2" class="form">
          <el-form-item
            :label="`${$t('msrjl.paihuaididian')}` + ':'"
            prop="channels"
          >
            <el-select v-model="formData2.channels" multiple>
              <el-option
                v-for="item in cameraList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="`${$t('msrjl.paihuaicishu')}` + ':'"
            prop="appeared_times"
          >
            <el-input-number
              v-model="formData2.appeared_times"
              :min="1"
              :max="30"
              label="徘徊次数"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            :label="`${$t('msrjl.paihuaitianshu')}` + ':'"
            prop="interval"
          >
            <el-select v-model="formData2.interval">
              <el-option
                v-for="item in intervalList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <MyButton @click="handlePaihuaiSubmit" class="confirm">{{
              $t("common.confirm")
            }}</MyButton>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  setMoshengrenjulei,
  getMoshengrenjulei,
  setPaihuai,
  getPaihuai,
} from "./service";
import { getCamera } from "@/services/index";
import MyButton from "@/components/Button";
import util from "@/utils";
export default {
  components: { MyButton },
  data() {
    return {
      cameraList: [],
      formData: {
        threshold: 80,
      },
      formData2: {
        interval: 3,
        appeared_times: 15,
      },
      marks: {
        0: "0",
        1: "1",
        2: "3",
        3: "5",
        4: "10",
        5: "30",
        6: "60",
      },
      intervalList: [
        { label: this.$t("msrjl.three"), value: 3 },
        { label: this.$t("msrjl.five"), value: 5 },
        { label: this.$t("msrjl.seven"), value: 7 },
        { label: this.$t("msrjl.fifteen"), value: 15 },
      ],
    };
  },
  mounted() {
    this.getMoshengrenjulei();
    this.getCamera();
    this.getPaihuai();
  },
  methods: {
    async getCamera() {
      let res = await getCamera();
      if (res.code == 0) {
        this.cameraList = res.data.camera.map((item) => {
          return {
            id: item.channel,
            name: item.camera_name,
          };
        });
        // this.$set(this.formData2, "channels", res.data.camera.map(item => item.channel));
      }
    },
    async getMoshengrenjulei() {
      let res = await getMoshengrenjulei();
      this.$set(this, "formData", res.data);
    },
    async getPaihuai() {
      let res = await getPaihuai();
      res.data.channels &&
        (res.data.channels = res.data.channels
          .split(",")
          .map((item) => Number(item)));
      this.$set(this, "formData2", res.data);
    },
    async handleChangeMoshengrenSwitch(val) {
      try {
        await this.handleMoshengrenSubmit();
      } catch (error) {
        this.formData.enable = !val;
      }
    },
    handleMoshengrenSubmit() {
      const params = {
        ...this.formData,
        interval: Number(this.marks[this.formData.interval]),
      };
      return setMoshengrenjulei(params).then((res) => {
        if (res.code === 0) {
          util.msg.success("edit_success");
        }
      });
    },
    async handlePaihuaiSubmit() {
      const params = {
        ...this.formData2,
        channels: this.formData2.channels.join(","),
      };
      let res = await setPaihuai(params);
      if (res.code === 0) {
        util.msg.success("edit_success");
      }
    },
    formatSlider(value) {
      return `${this.marks[value]}${this.$t("msrjl.minute")}`;
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  height: 100%;
  font-size: 14px;
  display: flex;
  .left,
  .right {
    height: 100%;
    flex: 1;
    background: #ffffff;
    border-radius: 20px 20px;
    .header {
      background: #fafafc;
      border-radius: 20px 20px 0 0;
      height: 56px;
      padding: 0 20px;
      .title {
        font-size: 20px;
        .divider {
          background-image: linear-gradient(
            180deg,
            rgba(45, 204, 112, 1) 0,
            rgba(52, 152, 219, 1) 100%
          );
          border-radius: 4px;
          width: 4px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }
    .content {
      padding: 60px;
      .slider-wrapper {
        /deep/ .el-form-item__content {
          display: flex;
          .el-slider {
            flex: 1;
            margin-right: 20px;
          }
        }
      }
      .progress-wrapper {
        .section {
          width: 60px;
        }
      }
    }
  }
  .right {
    flex: 1.5;
    height: 100%;
    background: #ffffff;
    border-radius: 20px;
  }
  /deep/ .el-form .el-form-item__content {
    margin-left: 75px;
  }
  /deep/ .el-form-item {
    margin-bottom: 60px;
  }
  .my-input-number {
    position: relative;
    &::after {
      content: "%";
      display: inline-block;
      height: 20px;
      line-height: 20px;
      text-align: center;
      position: absolute;
      right: 38%;
      top: 50%;
      transform: translateY(-50%);
    }
    .el-input__inner {
      padding-left: 30px;
      padding-right: 38px;
    }
  }
}
</style>
